<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>huati</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.css">
	<style type="">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		a{text-decoration: none;}
		body{
			font-size: 14px;
			background-color: #ddd;
			line-height: normal;
		}
		ul{margin-bottom: 0;}
		.top{
			background-color: #f26e2c;
		}
		.content{
			width: 1000px;
			margin: 0 auto;
		}
		.list >img{
			display: block;
			height: 50px;
			width: 240px;
			float: left;
			margin-right: 60px;
		}
		.list-1{
			float: left;
			width: 700px;
		}
		.list-1 li{
			float: right;
		}
		.list-1 .yonghu{
			float: left;
			display: block;
			text-decoration: none;
			font-weight: bold;
			color: #fff;
			padding: 16px 15px;
			transition: all .5s;
		}
		.list-1 li a{
			display: block;
			text-decoration: none;
			font-weight: bold;
			color: #fff;
			padding: 16px 15px;
			transition: all .5s;
		}
		.list-1 li a:hover{
			color: #f26e2c;
			background-color: #fff;
		}
		.about{position: relative;}
		.about-1{
			position: absolute;
			background-color: #f26e2c;
			top: 50px;
			left: 0;
			display: none;
		}
		.about:hover .about-1{
			display: block;
		}
		.person{
			margin-top: 20px;
		}
		.person-left{
			float: left;
		}
		.person-1 li{
			width: 120px;
			height: 40px;
		}
		.person-1 li a{
			display: block;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			padding: 11px 32px;
			background-color: #f26e2c;
			transition: all .5s;
		}
		.person-1 li:hover a{
			color: #f26e2c;
			background-color: #fff;
		}
		#person{
			display: block;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			padding: 11px 32px;
			background-color: #f26e2c;
			transition: all .5s;
			cursor: pointer;
		}
		.person-1 #person:hover{
			color: #f26e2c;
			background-color: #fff;
		}
		.person-left .focus a{
			color: #f26e2c;
			background-color: #fff;
		}
		.person-right{
			float: left;
			margin-left: 20px;
		}
		.person-right >img{
			width: 800px;
			height: 400px;
		}
		.person-right p{
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
		#menu li{
			float: left;
		}
		#menu li a{
			display: block;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			padding: 11px 32px;
			background-color: #f26e2c;
			transition: all .5s;
		}
		#menu li:hover a{
			color: #f26e2c;
			background-color: #fff;
		}
		#menu .focus2{
			color: #f26e2c;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<div class="top">
		<div class="list content">
			<img src="images/logo3.png">
			<ul class="list-1">
				<!-- <li><a href="http://127.0.0.1:8080">网站首页</a></li>
				<li><a href="">美食菜谱</a></li>
				<li class="about">
					<a href="">关于我们</a>
					<ul class="about-1">
						<li><a href="">联系我们</a></li>
						<li><a href="">用户反馈</a></li>
					</ul>
				</li> -->
				<li class="yonghu"></li>
				<li><a href="http://127.0.0.1:8080">退出登录</a></li>
			</ul>
		</div>
		<div style="clear:both"></div>
	</div>
	<div class="person content">
		<div class="person-left">
			<ul class="person-1">
				<li id="person">个人中心</li>
				<li class="focus"><a href="huati.html">发布话题</a></li>
				<li><a href="caipu.html">发布菜谱</a></li>
				<li><a href="zhanghu.html">账户设置</a></li>
			</ul>
		</div>
		<div class="person-right">
			<form>
			  <div class="form-group">
			    <label for="exampleInputEmail1">话题标题</label>
			    <input type="text" class="form-control put" id="exampleInputEmail1" >
			  </div>
			  <div class="form-group">
			  <textarea class="autosize txt" maxlength="300" placeholder="请输入内容" data-autosize-on="true" style="overflow: hidden; overflow-wrap: break-word; height: 120px;width: 332px;"></textarea>
			  </div>
			  <button type="button" class="btn btn-default" id="fabu">发布</button>
			  <button type="button" class="btn btn-default" id="cannel">取消</button>
			</form>
		</div>
	</div>
	<script type="">
		yonghu = document.querySelectorAll(".yonghu")[0]
		username = localStorage.value
		yonghu.innerHTML ="用户：" + username
		httpurl="http://127.0.0.1:8080"
		head = document.getElementsByTagName('head')[0]
		var fabu = document.getElementById('fabu')
		var cannel = document.getElementById("cannel")
		var put = document.querySelectorAll(".put")[0]
		var txt = document.querySelectorAll(".txt")[0]
		var person = document.getElementById("person")
		fabu.onclick=function(){
			title = put.value
			content = txt.value
			if(confirm("确定发布吗？")){
				if(title&&content){
					var script = document.createElement("script")
					script.src = `${httpurl}/addtopic?callback=topic&username=${username}&title=${title}&content=${content}`
					head.appendChild(script)
					history.go(0)
				}
				else{
					alert("发布话题内容不能为空！")
				}
			}
		}
		function topic(data){
			console.log(data)
		}
		person.onclick = function(){
			if(window.localStorage){
				location.href = `${httpurl}/persondata?username=${username}`
			}
		}
	</script>
</body>
</html>